<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <base th:href="@{/}"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/theme.css">
    <style>
        #footer {
            padding: 15px 0;
            background: #fff;
            border-top: 1px solid #ddd;
            text-align: center;
        }

        #topcontrol {
            color: #fff;
            z-index: 99;
            width: 30px;
            height: 30px;
            font-size: 20px;
            background: #222;
            position: relative;
            right: 14px !important;
            bottom: 11px !important;
            border-radius: 3px !important;
        }

        #topcontrol:after {
            /*top: -2px;*/
            left: 8.5px;
            content: "\f106";
            position: absolute;
            text-align: center;
            font-family: FontAwesome;
        }

        #topcontrol:hover {
            color: #fff;
            background: #18ba9b;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

        .label-type, .label-status, .label-order {
            background-color: #fff;
            color: #f60;
            padding: 5px;
            border: 1px #f60 solid;
        }

        #typeList :not(:first-child) {
            margin-top: 20px;
        }

        .label-txt {
            margin: 10px 10px;
            border: 1px solid #ddd;
            padding: 4px;
            font-size: 14px;
        }

        .panel {
            border-radius: 0;
        }

        .progress-bar-default {
            background-color: #ddd;
        }

        table {
            width: 100%;
            table-layout: fixed;
        }

        .table th, .table td {
            text-align: center;
            vertical-align: middle !important;
        }

        td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" th:href="@{/}" style="font-size:32px;">尚筹网-创意产品众筹平台</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse" style="float:right;">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> 张三<span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a th:href="@{/auth/member/to/center/page}"><i class="glyphicon glyphicon-scale"></i> 会员中心</a></li>
                                <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                                <li class="divider"></li>
                                <li><a th:href="@{/auth/member/do/loginout}"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<div class="container theme-showcase" role="main">

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li>
                                <a rel="nofollow" th:href="@{/}"><i class="glyphicon glyphicon-home"></i> 众筹首页</a>
                            </li>
                            <li>
                                <a rel="nofollow" th:href="@{/project/get/project/pagination/data/0}"><i class="glyphicon glyphicon-th-large"></i> 项目总览</a>
                            </li>
                            <li class="active">
                                <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-edit"></i> 发起项目</a>
                            </li>
                            <li>
                                <a rel="nofollow" th:href="@{/auth/member/to/my/crowd/page}"><i class="glyphicon glyphicon-user"></i> 我的众筹</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <p th:text="${message}">这里显示回报提交失败的提示消息</p>
                <p th:text="${session.message}">这里显示田忌回报失败的提示消息</p>
                <div class="panel panel-default">
                    <div class="panel-heading" style="text-align:center;">
                        <div class="container-fluid">
                            <div class="row clearfix">
                                <div class="col-md-3 column">
                                    <div class="progress" style="height:50px;border-radius:0;    position: absolute;width: 75%;right:49px;">
                                        <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">1. 项目及发起人信息</div>
                                        </div>
                                    </div>
                                    <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(221, 221, 221, 1);
                                             border-top-color: rgba(221, 221, 221, 0);
                                             border-bottom-color: rgba(221, 221, 221, 0);
                                             border-right-color: rgba(221, 221, 221, 0);
                                        ">
                                    </div>
                                </div>
                                <div class="col-md-3 column">
                                    <div class="progress" style="height:50px;border-radius:0;position: absolute;width: 75%;right:49px;">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">2. 回报设置</div>
                                        </div>
                                    </div>
                                    <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(92, 184, 92, 1);
                                             border-top-color: rgba(92, 184, 92, 0);
                                             border-bottom-color: rgba(92, 184, 92, 0);
                                             border-right-color: rgba(92, 184, 92, 0);
                                        ">
                                    </div>
                                </div>
                                <div class="col-md-3 column">
                                    <div class="progress" style="height:50px;border-radius:0;position: absolute;width: 75%;right:49px;">
                                        <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">3. 确认信息</div>
                                        </div>
                                    </div>
                                    <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(221, 221, 221, 1);
                                             border-top-color: rgba(221, 221, 221, 0);
                                             border-bottom-color: rgba(221, 221, 221, 0);
                                             border-right-color: rgba(221, 221, 221, 0);
                                        ">
                                    </div>
                                </div>
                                <div class="col-md-3 column">
                                    <div class="progress" style="height:50px;border-radius:0;">
                                        <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">4. 完成</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">

                        <div class="container-fluid">
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <blockquote style="border-left: 5px solid #f60;color:#f60;padding: 0 0 0 20px;">
                                        <b>
                                            回报设置
                                        </b>
                                    </blockquote>
                                </div>
                                <div class="col-md-12 column">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr style="background-color:#ddd;">
                                            <th>序号</th>
                                            <th>支付金额</th>
                                            <th>名额</th>
                                            <th>单笔限购</th>
                                            <th>回报内容</th>
                                            <th>回报时间</th>
                                            <th>运费</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="returnTableBody">
                                        <!--<tr>-->
                                        <!--    <td scope="row">1</td>-->
                                        <!--    <td>￥1.00</td>-->
                                        <!--    <td>无限制</td>-->
                                        <!--    <td>1</td>-->
                                        <!--    <td>1</td>-->
                                        <!--    <td>项目结束后的30天</td>-->
                                        <!--    <td>包邮</td>-->
                                        <!--    <td>-->
                                        <!--        <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>-->
                                        <!--        <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>-->
                                        <!--    </td>-->
                                        <!--</tr>-->
                                        <th:block
                                                th:if="${session.temp_project?.returnVOList != null and not #lists.isEmpty(session.temp_project.returnVOList)}">
                                            <tr th:each="returnVO : ${session.temp_project.returnVOList}">
                                                <td scope="row" th:text="${returnVOStat.index + 1}">1</td>
                                                <td th:text="${returnVO.supportmoney}">￥1.00</td>
                                                <td th:text="${returnVO.count}">无限制</td>
                                                <td th:text="${returnVO.signalpurchase == 0 ? '不限购' : '限购' + returnVO.purchase}">1</td>
                                                <td th:text="${returnVO.content}">1</td>
                                                <td th:text="${'项目结束后的' + returnVO.returndate + '天'}">项目结束后的30天</td>
                                                <td th:text="${returnVO.freight == 0 ? '包邮' : returnVO.freight}">包邮</td>
                                                <td>
                                                    <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>
                                                    <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>
                                                </td>
                                            </tr>
                                        </th:block>
                                        </tbody>
                                    </table>
                                    <button id="addReturnBtn" type="button" class="btn btn-primary btn-lg"><i class="glyphicon glyphicon-plus"></i> 添加回报</button>
                                    <div style="border:10px solid #f60;border-bottom-color: #eceeef;border-width: 10px;width:20px;margin-left:20px;
                                             border-left-color: rgba(221, 221, 221, 0);
                                             border-top-color: rgba(221, 221, 221, 0);
                                             border-right-color: rgba(221, 221, 221, 0);
                                    "></div>
                                    <div class="panel panel-default returnFormDiv" style="border-style: dashed;background-color:#eceeef">
                                        <div class="panel-body">

                                            <div class="col-md-12 column">
                                                <form class="form-horizontal">
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">回报类型</label>
                                                        <div class="col-sm-10">
                                                            <label class="radio-inline">
                                                                <input type="radio" name="type" value="0" checked> 实物回报
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input type="radio" name="type" value="1"> 虚拟物品回报
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">支持金额（元）</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" name="supportmoney" value="10000" class="form-control" style="width:100px;">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">回报内容</label>
                                                        <div class="col-sm-10">
                                                            <textarea class="form-control" name="content" rows="5" placeholder="简单描述回报内容，不超过200字">简单描述回报内容</textarea>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">说明图片</label>
                                                        <div class="col-sm-10">
                                                            <input type="file" name="returnPicture" style="display: none;"/>
                                                            <button id="uploadBtn" type="button" class="btn btn-primary btn-lg active">上传图片</button>
                                                            <label class="control-label">支持jpg、jpeg、png、gif格式，大小不超过2M，建议尺寸：760*510px选择文件</label>
                                                            <br/><img style="display: none"/>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">回报数量（名）</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" name="count" value="0" class="form-control" style="width:100px;display:inline">
                                                            <label class="control-label">“0”为不限回报数量</label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">单笔限购</label>
                                                        <div class="col-sm-10">
                                                            <label class="radio-inline">
                                                                <input type="radio" name="signalpurchase" value="0" checked> 不限购
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input type="radio" name="signalpurchase" value="1"> 限购
                                                            </label>
                                                            <input type="text" name="purchase" value="1" class="form-control" style="width:100px;display:inline">
                                                            <label class="radio-inline">默认数量为1，且不超过上方已设置的回报数量</label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">运费(元)</label>
                                                        <div class="col-sm-10">
                                                            <input type="text" name="freight" class="form-control" style="width:100px;display:inline" value="0">
                                                            <label class="control-label">“0”为包邮</label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">发票</label>
                                                        <div class="col-sm-10">
                                                            <label class="radio-inline">
                                                                <input type="radio" name="invoice" value="0"> 不可开发票
                                                            </label>
                                                            <label class="radio-inline">
                                                                <input type="radio" name="invoice" value="1" checked> 可开发票（包括个人发票和自定义抬头发票）
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">回报时间</label>
                                                        <div class="col-sm-10">
                                                            <label class="radio-inline">
                                                                项目结束后
                                                            </label>
                                                            <input type="text" name="returndate" value="7" class="form-control" style="width:100px;display:inline">
                                                            <label class="radio-inline">天，向支持者发送回报</label>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label"></label>
                                                        <div class="col-sm-10">
                                                            <button id="okBtn" type="button" class="btn btn-primary">确定</button>
                                                            <button id="resetBtn" type="reset" class="btn btn-default">取消</button>
                                                        </div>
                                                    </div>

                                                </form>
                                            </div>


                                        </div>
                                    </div>
                                </div>

                                <div class="container">
                                    <div class="row clearfix">
                                        <div class="col-md-12 column">
                                            <blockquote>
                                                <p>
                                                    <i class="glyphicon glyphicon-info-sign" style="color:#2a6496;"></i> 提示
                                                </p> <small>3个以上的回报：多些选择能提高项目的支持率。几十、几百、上千元的支持：3个不同档次的回报，能让你的项目更快成功。回报最好是项目的衍生品：<br>与项目内容有关的回报更能吸引到大家的支持。</small>
                                            </blockquote>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                    <div class="panel-footer" style="text-align:center;">
                        <a th:href="@{/project/launch/project/page}" class="btn  btn-default btn-lg">上一步</a>
                        <button id="nextStepBtn" type="button" class="btn  btn-warning btn-lg">下一步</button>
                        <a class="btn"> 预览 </a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container" style="margin-top:20px;">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div id="footer">
                    <div class="footerNav">
                        <a rel="nofollow" href="http://www.layoutit.cn">关于我们</a> | <a rel="nofollow" href="http://www.layoutit.cn">服务条款</a> | <a rel="nofollow"
                                                                                                                                                 href="http://www.layoutit.cn">免责声明</a>
                        | <a rel="nofollow" href="http://www.layoutit.cn">网站地图</a> | <a rel="nofollow" href="http://www.layoutit.cn">联系我们</a>
                    </div>
                    <div class="copyRight">
                        Copyright ?2017-2017layoutit.cn 版权所有
                    </div>
                </div>

            </div>
        </div>
    </div>

</div> <!-- /container -->
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script src="script/back-to-top.js"></script>
<script src="layer/layer.js"></script>
<script>
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    $(function () {
        $('.returnFormDiv').hide();
        $('#addReturnBtn').click(function (e) {
            $('.returnFormDiv').toggle();
        });

        // 回报信息表单对象数据
        let returnObj = {};

        // 回报说明图片
        $('#uploadBtn').click(function () {
            $('[name=returnPicture]').click();
        });

        $('[name=returnPicture]').change(function (event) {
            let file = event.target.files[0];
            let url = window.url || window.webkitURL;
            let path = url.createObjectURL(file);
            $(this).nextAll().eq(3).attr('src', path).show();
            // 将上传的文件封装到FormData对象中
            let formData = new FormData();
            formData.append('returnPicture', file);
            // 发送Ajax请求上传图片
            $.ajax({
                url: "[[@{/project/create/upload/return/picture.json}]]",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function (response) {
                    var result = response.result;
                    if ('SUCCESS' === result) {
                        layer.msg('上传成功');
                        returnObj['describPicPath'] = response.data;
                    }
                    if ('FAILED' === result) {
                        layer.msg('上传失败. ' + response.message);
                    }
                },
                error: function (response) {
                    layer.msg('上传失败. ' + response.status + ': ' + response.statusText);
                }
            });
        });

        // 添加汇报
        let order = 0;
        $('#okBtn').click(function () {
            // 收集表单数据
            returnObj['type'] = $('[name=type]:checked').val();
            returnObj['supportmoney'] = $('[name=supportmoney]').val();
            returnObj['content'] = $('[name=content]').val();
            returnObj['count'] = $('[name=count]').val();
            returnObj['signalpurchase'] = $('[name=signalpurchase]:checked').val();
            returnObj['purchase'] = $('[name=purchase]').val();
            returnObj['freight'] = $('[name=freight]').val();
            returnObj['invoice'] = $('[name=invoice]:checked').val();
            returnObj['returndate'] = $('[name=returndate]').val();
            // 发送Ajax请求
            $.ajax({
                url: '[[@{/project/create/return/info.json}]]',
                type: 'POST',
                data: returnObj,
                dataType: 'json',
                success: function (response) {
                    var result = response.result;
                    if ('SUCCESS' === result) {
                        layer.msg('保存成功');
                        // 回填表格
                        let orderTd = '<td>' + (++order) + '</td>';
                        let supportmoneyTd = '<td>' + returnObj['supportmoney'] + '</td>';
                        let countTd = '<td>' + returnObj['count'] + '</td>';
                        let signalpurchaseTd = '<td>' + (returnObj['signalpurchase'] === 0 ? '不限购' : '限购' + returnObj['purchase']) + '</td>';
                        let contentTd = '<td>' + returnObj['content'] + '</td>';
                        let returndateTd = '<td>' + (returnObj['returndate'] + '天以后返还') + '</td>';
                        let freightTd = '<td>' + (returnObj['freight'] ? '包邮' : returnObj['freight']) + '</td>';
                        let operationTd = '<td>' +
                            '<button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>' +
                            '<button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>' +
                            '</td>';
                        let trHTML = '<tr>' + orderTd + supportmoneyTd + countTd + signalpurchaseTd + contentTd + returndateTd + freightTd + operationTd + '</tr>;'
                        $('#returnTableBody').append(trHTML);
                        // 恢复表单
                        $('resetBtn').click();
                        // 隐藏表单
                        $('.returnFormDiv').hide();
                    }
                    if ('FAILED' === result) {
                        layer.msg('保存失败. ' + response.message);
                    }
                },
                error: function (response) {
                    layer.msg('保存失败. ' + response.status + ': ' + response.statusText);
                }
            });
        });

        $('#nextStepBtn').click(function (e) {
            if ($('#returnTableBody').text().trim() === '') {
                layer.msg('汇报信息不能为空');
                return;
            }
            // 恢复表单
            $('resetBtn').click();
            // 隐藏表单
            $('.returnFormDiv').hide();
            // 跳转
            window.location.href = '[[@{/project/create/confirm/page}]]';
        })
    });
</script>
</body>
</html>
